<template>
    <!-- =====【节点详情页】===== -->

    <div  class="tempxyz menmuStyle">
        <CCard class="rightCard">
            <CCardHeader class="header-wraper">
                <div class="header-left-titleWraper"   @click="goBack">
                    <span class="textTitle">节点管理</span>
                </div>
            </CCardHeader>
            <CCardBody class="card-body">
                <!-- 头部 -->
                <div slot="header">
                    <div class="pie-tb-header">
                        <div class="playVideoHeader">
                            <div class="page-item">
                              <div style="display: flex;flex: 1">
                                  <div class="body-content">
                                      <div class="item-title">
                                          <img
                                                  src="../../../../assets/nodeDetails.png/title01.png"
                                                  class="nodeIcon"
                                                  alt=""
                                          />
                                          <span>节点基本信息</span>
                                      </div>
                                      <div class="echarts-map2">
                                          <div class="echarts-item2 echart-style2">
                                              <div class="name-style">
                                                  <div class="name-item">
                                                      <div class="echart-style-text">主机名</div>

                                                      <div class="echart-style-text-content">
                                                          <span>{{ nodeData.nodeName }}</span>
                                                      </div>
                                                  </div>
                                                  <div class="name-item">
                                                      <div class="echart-style-text">别名</div>

                                                      <div class="echart-style-text-content">
                                                          <span>{{ nodeData.nodeAlias }}</span>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                          <div class="echarts-item2 echart-style2">
                                              <div class="echart-style-text-content-main">
                                                  <div class="echart-style-text">包含系统</div>
                                                  <div class="echart-style-text-content">
                                                      <div>
                                                          <span>{{ nodesMonitorBusinessName }}</span>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="body-content">
                                      <div class="item-title">
                                          <img
                                                  src="../../../../assets/nodeDetails.png/title03.png"
                                                  class="nodeIcon"
                                                  alt=""
                                          />
                                          <span>内存总量</span>
                                          <span>{{ nodeData.nodeMemory }} GiB</span>
                                      </div>
                                      <div class="echarts-map">
                                          <div class="echarts-item">
                                              <div
                                                      id="Main5"
                                                      class="echart-style"
                                              ></div>
                                          </div>
                                      </div>
                                  </div>
                              </div>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- 中部 -->
                    <div style="display: flex">
                        <div class="page-item-content" style="flex: 1">
                            <div class="echart-content">
                                <div class="echarts-map">
                                    <div
                                            id="Main8"
                                            class="echart-styles"
                                    ></div>
                                </div>
                                <div class="table">
                                    <Table
                                            :columns="columns2"
                                            :data="data2"
                                    ></Table>
                                </div>
                            </div>
                        </div>
                    </div>

            </CCardBody>
        </CCard>
    </div>
</template>
<script>
    export default {
        name: "nodesMonitor",
        data () {
            return {
                nodeData: {}, //节点信息
                nodesMonitorBusinessName: "", //节点信息==系统名称

                columns2: [
                    {
                        title: "文件系统",
                        key: "fstype",
                        width: "70",
                    },
                    // {
                    //   title: "分区",
                    //   key: "mountpoint",
                    //   width: "80",
                    // },
                    {
                        // minWidth:100,
                        maxWidth: 240,
                        title: "分区",
                        key: "mountpoint",
                        align: "size",
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                        style: {
                                            display: 'inline-block',
                                            minWidth: "100px",
                                            maxWidth: "200px",
                                            padding: "0 10px",
                                            overflow: 'hidden',
                                            textOverflow: 'ellipsis',
                                            whiteSpace: 'nowrap'
                                        },
                                        domProps: {
                                            title: params.row.mountpoint
                                        }
                                    }, params.row.mountpoint
                                )
                            ])
                        }
                    },
                    {
                        // minWidth:100,
                        maxWidth: 240,
                        title: "总空间(GiB)",
                        key: "size",
                        align: "center",
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        minWidth: "100px",
                                        maxWidth: "200px",
                                        padding: "0 10px",
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    },
                                    domProps: {
                                        title: params.row.size

                                    }
                                }, params.row.size)
                            ])
                        }
                    },
                    {
                        // minWidth:100,
                        maxWidth: 240,
                        title: "可用空间(GiB)",
                        key: "availableDisk",
                        align: "center",
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        minWidth: "100px",
                                        maxWidth: "200px",
                                        padding: "0 10px",
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    },
                                    domProps: {
                                        title: params.row.availableDisk

                                    }
                                }, params.row.availableDisk)
                            ])
                        }
                    },
                    {
                        // minWidth:100,
                        maxWidth: 240,
                        title: "使用率(%)",
                        key: "diskUsage",
                        align: "center",
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        minWidth: "100px",
                                        maxWidth: "200px",
                                        padding: "0 10px",
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    },
                                    domProps: {
                                        title: params.row.diskUsage

                                    }
                                }, params.row.diskUsage)
                            ])
                        }
                    },
                    // {
                    //   title: "总空间(GiB)",
                    //   key: "size",
                    //   // width:"80"
                    // },
                    // {
                    //   title: "可用空间(GiB)",
                    //   key: "availableDisk",
                    //   width: "90",
                    // },
                    // {
                    //   title: "使用率(%)",
                    //   key: "diskUsage",
                    //   // width:"100"
                    // },
                ],
                data2: [],

                option5: {
                    title: {
                        left: "center",
                        top: "10%",
                        text: "根分区使用率",
                        textStyle: {
                            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                            fontSize: 14,
                            color: "#98dcff",
                            fontWeight: "normal",
                        },
                    },
                    color: "#52A6F8",
                    series: [
                        {
                            center: ["50%", "60%"],
                            radius: "60%", //仪表盘半径
                            type: "gauge",
                            startAngle: 90,
                            endAngle: -270,
                            pointer: {
                                show: false,
                            },
                            progress: {
                                show: true,
                                overlap: false,
                                roundCap: true,
                                clip: false,
                                itemStyle: {
                                    // borderWidth: 1,
                                    // borderColor: '#464646'
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 10,
                                },
                            },
                            splitLine: {
                                show: false,
                                distance: 0,
                                length: 10,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                show: false,
                                distance: 50,
                            },
                            data: [
                                {
                                    value: 29,
                                    detail: {
                                        offsetCenter: ["0%", "0%"],
                                    },
                                },
                            ],
                            detail: {
                                width: 80,
                                height: 20,
                                fontSize: 20,
                                fontWeight: 600,
                                color: "#52A6F8",
                                formatter: "{value}%",
                            },
                        },
                    ],
                },
                option8: {
                    color: ["#52A6F8", "#00CDCC", "#38D100", "#FFD400"],
                    tooltip: {
                        trigger: "item",
                        // formatter: "{b}:{c}GiB",
                    },
                    series: [
                        {
                            name: "磁盘分类",
                            type: "pie",
                            radius: ["50%", "70%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: "center",
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                            itemStyle: {
                                borderRadius: 0,
                                borderColor: "#fff",
                                borderWidth: 2,
                            },
                            data: [
                                // { value: 202, name: "/ect/honstname" },
                                // { value: 410, name: "/ect/honsts" },
                                // { value: 280, name: "/ect/home" },
                                // { value: 320, name: "/ect/desktop" },
                            ],
                        },
                    ],
                },

            };
        },

        mounted () {
            this.chartsShowDiskData();
            this.chartsShow();
            this.getdateNode();
            this.getNodeIndex();

        },

        methods: {


            chartsShowDiskData () {
                // 获取节点磁盘信息
                let myChart8 = this.$echarts.init(document.getElementById("Main8"));
                // this.option7.tooltip.formatter=`{a0}:{c0}${res.data.unit}`;

                myChart8.setOption(this.option8);
            },
            goBack () {
                // this.$router.push({
                //   path: "nodesMonitor",
                //   query: {}
                // });
                this.$router.go(-1);
            },
            chartsShow () {
                // echars渲染
                this.$nextTick(() => {
                    if (this.nodeData.diskRootUsage == null) {
                        this.nodeData.diskRootUsage = 0;
                    }
                    this.option5.series[0].data[0].value = this.nodeData.diskRootUsage;
                    let myChart4 = this.$echarts.init(document.getElementById("Main5"));
                    myChart4.setOption(this.option5);
                });
            },
            // 获取节点列表==接口
            getdateNode () {
                let paramsId = this.$route.query.nodeId + "";
                this.http.get( `/monitor/node/${paramsId}`).then((res) => {
                    if (res.data.code == 0) {
                        this.nodeData = res.data.data;
                        this.getNodeIndex();
                        // this.nodeData.map((item) => this.nodeNameEach.push(item.nodeName));
                    }
                });
            },
            // 获取节点动态集群列表==接口
            getNodeIndex () {
                let _self = this;
                let params = {
                    name: this.nodeData.nodeName,
                };
                this.http.get(  "/monitor/getNodeIndex", params).then((res) => {
                    if (res.data.code == 0) {
                        // 分配给item每一项
                        Object.assign(this.nodeData, res.data.data[this.nodeData.nodeName]);
                    }
                });
            },



        },
    };
</script>
<style lang="less" scoped>
    .rightCard .card-body {
        height: calc(100% - 78px) !important;
        overflow-y: auto;
        margin-top: 17px;
        padding: 10px 0px 18px 11px !important;
    }
    .page-item {
        width: 100%;
        //   background-color: #fff;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .page-item {
        .body-content {
            display: flex;
            justify-content: center;
            flex-direction: column;
            margin-right: 10px;
            margin-bottom: 10px;
            flex: 1;

            .item-title {
                height: 60px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                box-shadow: inset 0px 0px 3px 1px  var(--label-font-color, #5d8bc4);

                span {
                    font-size: 15px;
                    font-weight: 600;
                    margin-right: 10px;
                }
            }

            .echarts-map {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
            }
            .echarts-map2 {
                display: flex;
                /* flex-wrap:wrap ;
                 */
                flex-direction: column;
                margin-top: 10px;
                height: 204px;
                /* zoom:1.1; */
            }
            .echarts-item {
                text-align: center;

                flex: 1;
                box-shadow: inset 0px 0px 3px 1px  var(--label-font-color, #5d8bc4);

            }
            .echarts-item-left {
                margin-left: 10px;
            }
            .echarts-item-demo {
                text-align: center;

                flex: 1;
                box-shadow: inset 0px 0px 3px 1px  var(--label-font-color, #5d8bc4);

            }
            /* .echarts-item:last-child {
              margin-left: 10px;
            } */
            .echarts-item2 {
                text-align: center;

                flex: 1;
                box-shadow: inset 0px 0px 3px 1px  var(--label-font-color, #5d8bc4);

            }
        }
        /* .body-content:last-child .echarts-map:last-child .echarts-item:last-child {
          margin-left: 0;
        } */
    }

    .page-item-content:nth-child(1) {
        // width: 700px;
        flex: 1.5;

        .echarts-map {
            width: 55%;
            height: 220px;
        }

        .table {
            width: 45%;
            padding: 10px;
        }
    }

    .page-item-content:nth-child(2) {
        // width: 420px;
        flex: 1;

        .echarts-map {
            width: 30%;
            height: 220px;
        }

        .table {
            width: 70%;
            padding: 10px 10px 10px 0;
        }
    }

    .page-item-content:nth-child(3) {
        // width: 400px;
        flex: 1;
        .table {
            width: 100%;
            height: 220px;
            padding: 10px;
        }
    }

    .page-item-content {
        display: flex;
        justify-content: center;
        /* flex-direction: column; */
        margin-right: 10px;
        margin-bottom: 10px;
        flex-wrap: wrap;

        .title {
            font-size: 18px;
            font-weight: 600;
            width: 100%;

        }

        .echart-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
            box-shadow: inset 0px 0px 3px 1px  var(--label-font-color, #5d8bc4);

        }
    }

    .echart-style {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
    }
    .echart-style2 {
        width: 100%;
        height: 40%;
    }
    .echart-style2:last-child {
        margin-top: 10px;
        height: 70%;
    }
    .echart-style-text-title {
        text-align: left;
    }
    .name-style {
        // display: flex;
        text-align: center;
    }
    .name-item {
        display: flex;
        align-items: center;
    }
    .name-item:first-child {
        margin-top: 15px;
    }
    .echart-style-text {
        // display: flex;
        font-size: 14px;
        font-weight: normal;
        color: #98dcff;
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        margin-left: 10px;
        width: 80px;
    }
    .echart-style-text-content-main {
        display: flex;
        height: 100%;
    }
    .echart-style-text-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 5px 10px;
        font-size: 16px;
        font-weight: 600;
        color: #98dcff;
        text-align: left;
        flex: 1;
        span {
            width: 260px;
            /* display: inline-block; */
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            white-space: break-spaces;
            word-break: break-all;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            word-wrap: break-word;
        }
    }
    .echart-styles {
        width: 100%;
        height: 200px;
        padding: 10px;
        display: flex;
        justify-content: center;
    }

    //表格样式
    .ivu-table-wrapper {
        width: 100%;
    }

    /deep/ .table td {
        padding: 0 !important;
        text-align: center !important;
        height: 38px !important;
    }

    /deep/.ivu-table-cell {
        padding-left: 0 !important;
        padding-right: 0 !important;
        white-space: nowrap !important;
    }

    /deep/ .demo-table-info-cell-type0 {
        color: #57d0d2;
        font-weight: bolder;
    }

    /deep/ .demo-table-info-cell-type1 {
        color: #7b62ea;
        font-weight: bolder;
    }

    /deep/ .demo-table-info-cell-type2 {
        color: #2ca0ff;
        font-weight: bolder;
    }

    /deep/ .demo-table-info-cell-type3 {
        color: #ef843c;
        font-weight: bolder;
    }

    /deep/ .disk-type0 {
        color: #52a6f8;
        font-weight: bolder;
    }

    /deep/ .disk-type1 {
        color: #ffd400;
        font-weight: bolder;
    }

    /deep/ .disk-type2 {
        color: #38d100;
        font-weight: bolder;
    }

    /deep/ .disk-type3 {
        color: #00cdcc;
        font-weight: bolder;
    }

    /deep/ .usage-type {
        background-color: #35b033 !important;
    }

    /deep/ .table thead th {
        border: none !important;
    }

    /deep/ .ivu-table-header thead tr th {
        text-align: center !important;
        font-size: 12px !important;
        font-weight: 500;
    }
    /* /deep/ .ivu-table-header{

    } */
    // .page-item .body-content:nth-child(1) .item-title {
    //   background: url("../../assets/img/nodeDetails.png/bg01.png");
    // }

    // .page-item .body-content:nth-child(2) .item-title {
    //   background: url("../../assets/img/nodeDetails.png/bg02.png");
    // }

    // .page-item .body-content:nth-child(3) .item-title {
    //   background: url("../../assets/img/nodeDetails.png/bg03.png");
    // }

    .nodeIcon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
    .goBack {
        // float: right;
        // margin: 20px 20px 0 0;
        margin: 5px;
    }
</style>
